<template>
    <div class="shopcar-container">

        <div class="mui-card" v-for="(item, index) in shopCarList" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner goods-list">
                    <mt-switch v-model="$store.getters.getGoodsState[item.id]"
                        @change="selectedChange(item.id, $store.getters.getGoodsState[item.id])"></mt-switch>
                    <img :src="item.thumb_path" alt="">
                    <div>
                        <h4>{{ item.title }}</h4>
                        <p>
                            <span class="price">￥{{ item.sell_price }}</span>
                            <!-- 获取添加到购物车中的数量  -->
                            <numbox :initCount="$store.getters.getShopCarCount[item.id]" :goodsid="item.id"></numbox>
                            <a href="" @click.prevent="removeFromCar(item.id, index)">删除</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner jiesuan">
                    <div>
                        <p>总计（不含运费）</p>
                        <p>已勾选商品<span class="red">{{ $store.getters.getCountAndAmount.count }}</span>件，总结<span class="red">￥{{ $store.getters.getCountAndAmount.amount }}</span></p>
                    </div>
                    <div>
                        <mt-button type="danger">去结算</mt-button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import numbox from '../subcomponents/shopcar_numberbox.vue'
    export default {
        data () {
          return {
              shopCarList: []
          }
        },
        created () {
          this.getShopCarList();
        },
        methods: {
            getShopCarList() {
                // 获取所有ID
                var ids = [];
                this.$store.state.car.forEach( item => ids.push(item.id));
                // 如果没有 id 就返回
                if (ids.length == 0) {
                    return;
                }
                this.$http.get('shopcar/ShopCarList.json?ids=' + ids.join(',')).then( result => {
                   if (result.body.status === 0) {
                       this.shopCarList = result.body.message;
                   }
                });
            },
            removeFromCar(id, index) {
                // 删除 list 和 store 中的数据
                this.shopCarList.splice(index, 1);
                this.$store.commit('removeFromCar', id);
            },
            selectedChange(id, val) {
                this.$store.commit('updateGoodsState', { id, selected: val });
            }
        },
        components: {
            numbox
        }
    }
</script>

<style lang="scss" scoped>
.shopcar-container {
    background-color: #eeeeee;
    overflow: hidden;

    .goods-list {
        display: flex;
        align-items: center;

        img {
            width: 60px;
            height: 60px;
            padding: 5px;
        }
        h4 {
            font-size: 13px;
            margin-bottom: 10px;
        }
        .price {
            color: red;
            font-weight: bold;
        }
        .mui-numbox {
            height: 25px;
        }
    }

    .jiesuan {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .red {
            color: red;
            font-size: 16px;
            font-weight: bold;
        }
    }
}
</style>
